<template>
    <div class="bottom-bar">
      <button class="btn" @click="cancel">取消</button>
      <div class="right">
        <button class="btn" v-if="canPrev" @click="$emit('prev')">上一步</button>
        <button class="btn primary" v-if="canNext" @click="$emit('next')">下一步</button>
        <button class="btn primary" v-if="!canNext" @click="$emit('finish')">完成</button>
      </div>
    </div>
  </template>
  
  <script setup>
  import { useRouter } from 'vue-router'
  const props = defineProps({
    currentStep: Number,
    canNext: Boolean,
    canPrev: Boolean
  })
  const router = useRouter()
  const emit = defineEmits(['cancel'])
  function cancel() {
    // router.push({ path: '/home', query: { menu: 'task-list' } })
    // 改为由父组件处理
    emit('cancel')
  }
  </script>
  
  <style scoped>
  .bottom-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    background: #fff;
    border-top: 1px solid #eee;
  }
  .btn {
    margin-right: 12px;
    padding: 6px 18px;
    border: none;
    background: #f5f5f5;
    border-radius: 4px;
    cursor: pointer;
  }
  .btn.primary {
    background: #409eff;
    color: #fff;
  }
  .right {
    display: flex;
    align-items: center;
  }
  </style>